<template>
	<view class="index" :style="{ paddingTop: customTop + 'px' }">
		<image src="/static/bg.jpg" mode="aspectFill" class="bg"></image>
		<view class="main">
			<image src="/static/banner.png" mode="widthFix" class="banner"></image>
			<view class="index-con-bottom">
				<view class="flex align-center justify-between">
					<view class="estimateBtn" @tap="estimate(0)"><image src="../../static/synthesize.png" mode="widthFix"></image></view>
					<view class="estimateBtn" @tap="estimate(1)"><image src="../../static/English.png" mode="widthFix"></image></view>
				</view>
				<view class="flex align-center justify-center margin-top-lg">
					<image class="check" src="../../static/success.png" mode="widthFix"></image>
					<text>
						已有
						<text class="num">{{ count }}</text>
						人实时参与估分
					</text>
				</view>
				<button class="redBtn" @tap="showProbability">直接查上岸概率</button>
				<button class="redBtn" @tap="showRegulate">全国院校调剂查询</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
	name: 'index',
	data() {
		return {
			modalName: '',
			egScore: '',
			abilityScore: '',
			count: 0,
			customTop: 60
		};
	},
	computed: {},
	mounted() {
		uni.getSystemInfo({
			success: e => {
				const custom = wx.getMenuButtonBoundingClientRect();
				this.customTop = custom.bottom;
			}
		});
	},
	onLoad() {},
	onShow() {
		this.getCount();
	},
	computed: {
		...mapState(['openid']),
		total() {
			return (this.egScore - 0 || 0) + (this.abilityScore - 0 || 0);
		}
	},
	methods: {
		...mapMutations(['login']),
		getCode() {
			let $me = this;
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					let code = loginRes.code;
					$me.getSession(code);
				}
			});
		},
		getSession(code) {
			this.$getajax(this.$api.getSession, { code }).then(da => {
				if (da.code == 200) {
					this.login(da.data);
					setTimeout(() => {
						this.logAssessment();
					}, 300);
				}
			});
		},
		//常看上岸概率
		showProbability(e) {
			uni.navigateTo({
				url: '/pages/probability/probability'
			});
		},
		showRegulate() {
			uni.navigateTo({
				url: '/pages/regulate/regulate'
			});
		},
		//立即估算
		estimate(type) {
			uni.navigateTo({
				url: '/pages/answer/answer?type=' + (type == 0 ? 'gz' : 'en')
			});
		},
		//查看上岸概率
		viewProbability() {
			if (this.abilityScore != '' && this.egScore != '') {
				this.hideModal();
				if (this.openid) {
					this.logAssessment();
				} else {
					this.getCode();
				}
			} else {
				uni.showToast({
					title: '请输入估分',
					icon: 'none'
				});
			}
		},
		changeAbilityScore(e) {
			if (e.detail.value - 0 > 200) {
				this.abilityScore = 200;
			} else {
				this.abilityScore = e.detail.value - 0;
			}
		},
		changeEnScore(e) {
			if (e.detail.value - 0 > 100) {
				this.egScore = 100;
			} else {
				this.egScore = e.detail.value - 0;
			}
		},
		getCount() {
			this.$getajax(this.$api.getCount).then(da => {
				if (da.code == 200) {
					this.count = da.data;
				}
			});
		},
		logAssessment() {
			this.$getajax(this.$api.logAssessment, {
				enscore: this.egScore,
				gzscore: this.abilityScore,
				openid: this.openid
			}).then(da => {
				if (da.code == 200) {
					uni.navigateTo({
						url: '/pages/probability/probability?abilityScore=' + this.abilityScore + '&egScore=' + this.egScore
					});
				}
			});
		},
		openViode() {
			console.log('哈哈哈');
			uni.getChannelsLiveInfo({
				finderUserName: 'sphx0hvmEITRRrY',
				success: () => {
					console.log('打开成功');
				},
				fail: res => {
					console.log('打开失败', res);
				}
			});
			// wx.openChannelsLive({
			// 	finderUserName: 'sphx0hvmEITRRrY',
			// 	success: () => {
			// 		console.log('打开成功');
			// 	}
			// });
		}
	},
	onShareAppMessage(res) {
		var url = '/pages/index/index';
		return {
			title: '果芽MBA MEM MPA 联考估分',
			path: url,
			imageUrl: 'https://apps.guoyamba.com/share01.png'
		};
	}
};
</script>

<style lang="scss">
page,
.page-view {
	height: 100%;
	position: relative;
	background: #db6553;
}
.index {
	position: relative;
	height: 100%;
	line-height: 1.8;
	padding-top: 56px;
	box-sizing: border-box;
	background: #db6553;
	overflow: hidden;
}
.bg {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
.main {
	position: relative;
	z-index: 99;
	padding-top: 40rpx;
	padding-bottom: 40rpx;
	height: 100%;
	overflow: auto;
}
.banner {
	width: 592rpx;
	display: block;
	margin: 0 auto;
	height: 480rpx;
}
.estimateBtn {
	background: #fff;
	width: 310rpx;
	height: 328rpx;
	image {
		display: block;
		width: 100%;
		height: 328rpx;
	}
}
.index-con-bottom {
	margin: 25rpx 25rpx 0;
	background: #fff;
	text-align: center;
	color: #ffffff;
	font-size: 40rpx;
	font-weight: 600;
	border-radius: 30rpx;
	padding: 40rpx 25rpx 90rpx;
	.icon {
		width: 100rpx;
		vertical-align: middle;
		margin-top: -6rpx;
		margin-right: 20rpx;
	}
	.title {
		font-weight: 600;
		font-size: 40rpx;
		background-image: -webkit-linear-gradient(bottom, #efbab2, #fefcfc);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.check {
		width: 41rpx;
		height: 41rpx;
		margin-right: 20rpx;
	}
	text {
		font-size: 33rpx;
		color: #000;
	}
	.num {
		color: #da6554;
		font-weight: bold;
		font-size: 53rpx;
	}
	.redBtn {
		margin-top: 60rpx;
		width: 582rpx;
		color: #fff;
		background: #da6554;
		text-align: center;
		border-radius: 34upx;
		line-height: 78upx;
		font-size: 37upx;
		display: block;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
		& + .redBtn {
			margin-top: 28upx;
		}
	}
}
.cu-modal {
	.title {
		font-size: 30rpx;
		padding-left: 16upx;
	}
	.modal-con {
		padding: 10rpx 40rpx 40rpx;
		text-align: left;

		.row {
			margin: 20rpx 0;
			text {
				vertical-align: middle;
				line-height: 1.4rem;
				padding-right: 10rpx;
			}
		}

		.input-number {
			border: 2rpx solid #aaaaaa;
			width: 110rpx;
			border-radius: 8rpx;
			padding: 0 10rpx;
		}
		.operate {
			margin: 40rpx 0;
			.defaultBtn {
				margin-top: 30rpx;
				width: 400rpx;
				line-height: 80rpx;
			}
		}
		.total {
			text-align: center;
			font-size: 30upx;
		}
	}
}
</style>
